<template>
  <div class="all">
    <div class="lists">
      <div class="list" v-for="item in 4" :key="item">
        <div class="listImg">
          <img
            src="https://img1.baidu.com/it/u=358762235,736393980&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
            alt=""
          />
        </div>
        <p class="topic">多功能升降煮茶器</p>
        <div class="box_17">
          <span class="price">76.90星值</span>
          <span class="barter">兑换</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.lists {
  margin: 0 20px;
  margin-bottom: 15px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  border-radius: 20px;
}
.list {
  width: 50%;
}
.listImg {
  width: 159px;
  height: 159px;
  overflow: hidden;
  border-radius: 5px;
  /* border-radius: 8px; */
  /* background-color: rgba(206, 206, 206, 100); */
  margin: 8px 0 0px 0;
}
.box_17 {
  width: 159px;
  height: 15px;
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  /* margin: 14px 0 47px 10px; */
}
.topic {
  width: 150px;
  height: 15px;
  color: rgba(51, 51, 51, 1);
  font-size: 14px;
  font-family: PingFangSC-Regular;
  text-align: left;
  white-space: nowrap;
  line-height: 15px;
  margin: 8px 0 0 10px;
}
.price {
  width: 64px;
  height: 17px;
  color: rgba(107, 164, 217, 1);
  font-size: 14px;
  font-family: PingFangSC-Semibold;
  text-align: left;
  white-space: nowrap;
  line-height: 17px;
  /* margin-top: 5px; */
  margin-left: 10px;
}
.barter {
  width: 40px;
  height: 17px;
  color: rgba(45, 50, 67, 1);
  font-size: 14px;
  text-align: center;
  font-family: PingFangSC-Regular;
  /* text-align: left; */
  white-space: nowrap;
  line-height: 17px;
  margin: 0px 20px 0px 10px;
  background-image: linear-gradient(
    -90deg,
    rgba(185, 182, 229, 1) 0,
    rgba(185, 182, 229, 1) 0,
    rgba(182, 220, 255, 1) 100%,
    rgba(182, 220, 255, 1) 100%
  );
  border-radius: 17px;
}
</style>
